<template>
	<w-dialog ref="dialog" class="dialog" width="760" :height="500" :cover="true">
	  <w-horizontal class="dialog__head" height="45">
	    <w-html class="dialog__head__title" valign="middle" v-dialog-move="true" width="*">{{title}}</w-html>
	    <w-html class="dialog__head__close" align="center" valign="middle" width="40" @click="close"><i class="f-i f-i-close"></i></w-html>
	  </w-horizontal>
	  <w-vertical class="dialog__content" height="*" :scroll-y="true">
	    <div>一些内容...</div>
	    <div>一些内容...</div>
	  </w-vertical>
	  <w-horizontal class="dialog__foot" height="50">
	    <w-buttonbar class="dialog__foot__oper" width="*" height="*" align="right" gap="10">
	      <w-button face="primary" text="确定" @click="save"></w-button>
	      <w-button text="关闭" @click="close"></w-button>
	    </w-buttonbar>
	  </w-horizontal>
	</w-dialog>
</template>

<script>
	export default {
		props: ['title'],
		methods: {
			save() {
				const result = {success: true}
				this.$refs.dialog.resolve(result)
				this.close()
			},
			close() {
				this.$refs.dialog.close()
			}
		}
	}
</script>

<style lang="less" scoped>
  .dialog {
		box-shadow: none;
		background: #fff;
    &__head {
      background-color: #2398ff;
      color: #FFF;

      &__title {
        padding-left: 10px;
        font-size: 15px;
      }

      &__close {
        cursor: pointer;
        &:hover {
          .f-i-close {
            color: #e00;
          }
        }
      }
    }
		
		&__content {
		  padding: 10px;
		}

    &__foot {
      background: #f8f8f8;
      border-top: 1px solid #eee;
			padding-right: 10px;
    }
  }
</style>